<template>

    <div class="cont">
        <!-- <img src="@/assets/img/fire-saver.jpg" class="function-img" alt=""> -->
        <el-form class="cont-content">
            <el-form-item label="接口" label-width="3rem">
                <el-select v-model="setFireCfg.data.CMode" size="small" style="width: 100%;text-align:left ">
                    <el-option :value="parseInt(0)" label="串口" />
                    <el-option :value="parseInt(1)" label="并口" />
                </el-select>
            </el-form-item>
            <el-form-item label="主机" style="width:200px" label-width="3rem">
                <el-select blur v-model="setFireCfg.data.fire" style="width:100%" size="small" class="main-eng"
                    @change="selectChange">
                    <el-option v-for="item in fireList" class="main-eng" style="width:200px" :key="item.id"
                        :label="item.v" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="主机图 " label-width="3rem">
                <img class="main-engire" :src="imgPath" alt="">
            </el-form-item>
            <div align="center">
                <el-button @click="saveDate" size="small" style="margin-bottom:20px;margin-top:60px" type="primary"
                    icon="el-icon-edit">设置</el-button>
            </div>
            <el-form-item label="数据" label-width="3rem">
                <el-input v-model="getState.data" label-width="6rem" style="width: 100%;text-align:left "></el-input>
            </el-form-item>

        </el-form>

        <el-form style="margin-top:0px">

            <el-form-item label="采集数据" label-width="4rem">

            </el-form-item>

        </el-form>

        <el-button type="primary" class="impor" plain @click="downloadTxt">导出</el-button>

        <textarea type="text" v-model="getHEXDatas.data" disabled label-width="2rem" class="orignal"
            style="min-height: 133px;"></textarea>

    </div>

</template>
  
<script>

// import { tcpclientPath } from '@/modules/iot/http/apiResources'

import { saveAs } from 'file-saver'

// import svg-icon from '@/components/svg-icon'

export default {

    components: {

        // svg-icon

    },

    props: {},

    data() {

        return {

            getFireCfg: {

                port: 23900,

                type: 'getFireCfg'

            },

            getState: {

                port: 23900,

                type: 'getState',

                data: ''

            },

            setFireCfg: {

                port: 23900,

                type: 'setFireCfg',

                data: {}

            },

            getFireList: {

                port: 23900,

                type: 'getFireList',

                data: ''

            },

            getHEXDatas: {

                port: 23900,

                type: 'getHEXDatas',

                data: ''

            },

            fireList: [],

            textarea1: '',

            imgPath: ''

        }

    },

    mounted() {

        this.loadData()

        this.timer = setInterval(this.getfireState, 2000)

        this.timerr = setInterval(this.getfireHEXDatas, 2000)

    },

    beforeDestroy() {

        clearInterval(this.timer)

        clearInterval(this.timerr)

    },

    methods: {

        // loadData() {

        //     this.$http.post(tcpclientPath, this.getFireList).then((res) => {

        //         if (res.data.code === 200) {

        //             this.fireList = res.data.data

        //         }

        //     })

        //     this.$http.post(tcpclientPath, this.getFireCfg).then((res) => {

        //         if (res.data.code === 200) {

        //             this.setFireCfg.data = res.data.data

        //             let s = '消防配置[' + res.data.data.ver + ']'

        //             this.$emit('changedFire', s)

        //         }

        //     })

        // },

        // getfireState() {

        //     this.$http.post(tcpclientPath, this.getState).then((res) => {

        //         if (res.data.code === 200) {

        //             this.getState.data = res.data.data

        //         }

        //     })

        // },

        // getfireHEXDatas() {

        //     this.$http.post(tcpclientPath, this.getHEXDatas).then((res) => {

        //         if (res.data.code === 200) {

        //             this.getHEXDatas.data += res.data.data

        //         }

        //     })

        // },

        // saveDate() {

        //     this.$http.post(tcpclientPath, this.setFireCfg).then((res) => {

        //         if (res.data.code === 200) {

        //             alert('设置成功')

        //         }

        //     })

        // },

        selectChange() {

            this.imgPath = '/img/' + this.setFireCfg.data.fire + '.jpg'

        },

        getDownload() {

            const anchor = document.createElement('a')

            anchor.href = `/#/setupn/index.txt`

            anchor.setAttribute('download', '原始数据.txt')

            anchor.innerHTML = 'downloading...'

            anchor.style.display = 'none'

            document.body.appendChild(anchor)

            setTimeout(() => {

                anchor.click()

                document.body.removeChild(anchor)

                setTimeout(() => {

                    self.URL.revokeObjectURL(anchor.href)

                }, 250)

            }, 66)

        },

        downloadTxt() {

            let str = this.getHEXDatas.data

            let strData = new Blob([str], { type: 'text/plain;charset=utf-8' })

            saveAs(strData, '测试文件下载.txt')

        }

    }

}

</script>

<style>
.cont {

    /* position: relative;
  
    display: flex;
  
    flex-wrap: wrap; */

    background-color: white;

    padding-bottom: 5px;

    width: 100%;

}

.cont-content {

    justify-content: left;

    width: 100%;

    margin-top: 10px;

}

.original-data {

    border-radius: 10px;

    font-size: 16px;

    width: 100%;

    min-height: 90px;

    margin-top: 0px;

    border: 1px solid rgb(0, 0, 0);

}

.main-engire {

    width: 200px;

    height: 80px;

    border: 1px solid #000000;

}

.function-img {

    width: 100%;

}

.impor {

    position: absolute;

    right: 0;

    top: 389px;

    /* width: 40px; */

    float: right;

    border-radius: 5px;

    /* height: 24px; */

    text-align: center;

    vertical-align: middle;

    background-color: rgba(15, 166, 204, 0.89);

    color: aliceblue;

}

.impor-word {

    font-size: 16px;

    width: 60px;

    height: 20px;

    margin-top: 5px;

    border: 1px solid #f5f5f5;

}

.main-en {

    width: 190px !important;

    text-align: left;

}

.orignal {

    width: 100%;

    text-align: left;

    min-height: 200px;

}

.page-bestinline {

    width: 100%;

}

.page-beforeline {

    width: 100%;

}
</style>
